<template>
  <div class="page4">
    <div class="pages-menu">
      <span class="up" @click="getUp">上一页</span>
      <span class="down" @click="getDown">下一页</span>
    </div>
    <Row :gutter="12" type="flex" justify="space-between">
      <Col span="7">
        <titleBox
          :width="500"
          :height="320"
          :titleWidth="196"
          :titleHeight="40"
          :title="'资源概括'"
        >
          <template #content>
            <div class="scendTitle">
              <span>停车场</span>
            </div>
            <div class="scendList">
              <ul>
                <li>
                  <div>
                    <img src="../assets/fy/scendPack.png" alt="" />
                    <span>停车场总数(个)</span>
                  </div>
                  <div class="scendNum">818</div>
                </li>
                <li>
                  <div>
                    <img src="../assets/fy/scendRect.png" alt="" />
                    <span>泊位总数(个)</span>
                  </div>
                  <div class="scendNum">818</div>
                </li>
              </ul>
            </div>
            <div class="scendTitle">
              <span>道闸</span>
            </div>
            <div class="scendList">
              <ul>
                <li>
                  <div>
                    <img src="../assets/fy/scendWater.png" alt="" />
                    <span>道闸车场(个)</span>
                  </div>
                  <div class="scendNum">818</div>
                </li>
              </ul>
            </div>
          </template>
        </titleBox>
        <titleBox
          :width="500"
          :height="281"
          :titleWidth="173"
          :titleHeight="40"
          :title="'设备分析'"
        >
          <template #content>
            <div class="detail-list">
              <cashEchartsVue
                :title="'收费率'"
                :numColor="'#0e93e6'"
                :pieColor="'#47aef5'"
                :centerIcon="'doller'"
              ></cashEchartsVue>
              <weekEchartsVue></weekEchartsVue>
            </div>
          </template>
        </titleBox>
        <titleBox
          :width="500"
          :height="310"
          :titleWidth="173"
          :titleHeight="40"
          :title="'支付方式'"
        >
          <template #content>
            <ringEcharts :ringData="ringData" :title="'总订单'"></ringEcharts>
          </template>
        </titleBox>
      </Col>
      <Col span="10" class="main">
        <div class="map-container">
          <china-map :height="'3.4979rem'"></china-map>
        </div>
        <titleBox
          :width="800"
          :height="280"
          :titleWidth="192"
          :titleHeight="40"
          :title="'30日订单变化'"
          :backBg="'center-bottom-bg'"
        >
          <template #content>
            <lineEcharts></lineEcharts>
          </template>
        </titleBox>
      </Col>
      <Col span="7">
        <titleBox
          :width="500"
          :height="280"
          :titleWidth="193"
          :titleHeight="40"
          :title="'车位状态'"
        >
          <template #content>
            <scrolList
              :height="'1.2167rem'"
              :scrol-list-cloums="scrolListCloums"
              :table-data="tableData"
            ></scrolList>
          </template>
        </titleBox>
        <titleBox
          :width="500"
          :height="310"
          :titleWidth="173"
          :titleHeight="40"
          :title="'停车趋势变化'"
          :menu="true"
        >
          <template #content>
            <twoLineEchartsVue></twoLineEchartsVue>
          </template>
        </titleBox>
        <titleBox
          :width="500"
          :height="318"
          :titleWidth="173"
          :titleHeight="40"
          :title="'时长分析'"
          :menu="true"
        >
          <template #content>
            <pieChartsVue></pieChartsVue>
          </template>
        </titleBox>
      </Col>
    </Row>
  </div>
</template>

<script>
import titleBox from './components/common/titleBox.vue';
import xiejiaoEchartsVue from './components/common/xiejiaoEcharts.vue';
import deatil from './components/common/deatil.vue';
import cashEchartsVue from './components/common/cashEcharts.vue';
import weekEchartsVue from './components/common/weekEcharts.vue';
const chinaMap = () => import('./components/common/chinaMap');
import lineEcharsBarVue from './components/common/lineEcharsBar.vue';
import scrolList from './components/common/scrolList.vue';
import pieChartsVue from './components/common/pieCharts.vue';
import lineEcharts from './components/common/lineEcharts.vue';
import ringEcharts from './components/common/ringEcharts.vue';
import twoLineEchartsVue from './components/common/twoLineEcharts.vue';
export default {
  name: 'page4',
  components: {
    titleBox,
    xiejiaoEchartsVue,
    deatil,
    cashEchartsVue,
    weekEchartsVue,
    chinaMap,
    lineEcharsBarVue,
    scrolList,
    pieChartsVue,
    lineEcharts,
    ringEcharts,
    twoLineEchartsVue,
  },
  data() {
    return {
      ringData: [
        { name: '支付支付', value: 731 },
        { name: '微信', value: 321 },
        { name: '支付宝', value: 521 },
      ],
      scrolListCloums: [
        { label: '车牌', prop: 'rank', width: '.9375rem', sortable: true },
        { label: '停车点', prop: 'name', width: '.625rem' },
        { label: '泊车号', prop: 'score', width: '.5208rem', sortable: true },
        { label: '进场时间', prop: 'score', width: '.5208rem', sortable: true },
      ],
      tableData: [
        {
          rank: '赣A12345',
          name: '商场地下停车...',
          score: 'A-541',
          date1: '03-03 12:57',
        },
        {
          rank: '赣A12345',
          name: '商场地下停车...',
          score: 'A-542',
          date1: '03-03 12:57',
        },
        {
          rank: '赣A12345',
          name: '商场地下停车...',
          score: 'A-543',
          date1: '03-03 12:57',
        },
        {
          rank: '赣A12345',
          name: '商场地下停车...',
          score: 'A-544',
          date1: '03-03 12:57',
        },
        {
          rank: '赣A12345',
          name: '商场地下停车...',
          score: 'A-545',
          date1: '03-03 12:57',
        },
        {
          rank: '赣A12345',
          name: '商场地下停车...',
          score: 'A-546',
          date1: '03-03 12:57',
        },
        {
          rank: '赣A12345',
          name: '商场地下停车...',
          score: 'A-547',
          date1: '03-03 12:57',
        },
        // 添加更多数据...
      ],
      // 当前页面
      currentPageNumber: 2,
    };
  },
  methods: {
    changeChoise(index) {
      this.sortIndex = index;
    },
    changeCashIndex(index) {
      this.cashIndex = index;
    },
    getUp() {
      this.currentPageNumber++;
      if (this.currentPageNumber > 3) {
        this.currentPageNumber = 1; // 超过第三页跳转到第一页
      }
      this.$router.push(`/page${this.currentPageNumber}`);
    },
    getDown() {
      this.currentPageNumber--;
      if (this.currentPageNumber < 1) {
        this.currentPageNumber = 3; // 小于第一页跳转到第三页
      }
      this.$router.push(`/page${this.currentPageNumber}`);
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'PuHuiTi';
  src: url('../assets/font/AlibabaSans-Light.otf');
}

.page4 {
  width: 100%;
  padding: 0.0417rem 0.2083rem 0rem 0.2083rem;
  .ivu-col {
    height: 100%;
    display: grid;
    grid-gap: 0.1042rem;
    grid-template-rows: auto auto 33.33%;
  }
}

.detail-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0.0417rem 0rem;
  width: 100%;
  padding: 0rem 0.1042rem;
  position: relative;
  .line {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .row-line {
      width: 2.3958rem;
      height: 0.0052rem;
      position: absolute;
      top: 50%;
      left: 0%;
      background: radial-gradient(
        ellipse at center,
        rgba(0, 168, 255, 0.44),
        rgba(0, 168, 255, 0)
      );
      opacity: 0.3;
    }
    .col-line {
      width: 0.0104rem;
      height: 0.8333rem;
      position: absolute;
      left: 49.5%;
      top: 10%;
      background: radial-gradient(
        ellipse at center,
        rgba(0, 168, 255, 0.44),
        rgba(0, 168, 255, 0)
      );
      opacity: 0.3;
    }
  }
  ul {
    display: flex;
    justify-content: flex-start;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      .data-num {
        width: 0.8854rem;
        height: 0.6771rem;
        text-align: center;
        background: url('../assets/fy/current-data.png') no-repeat;
        background-size: 100% 100%;
        padding: 0.2083rem 0rem;
        span {
          font-family: DIN;
          font-weight: bold;
          font-size: 0.125rem;
          color: rgba(0, 180, 255, 1);
          line-height: 0.1875rem;
        }
      }
      .desc {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 0.0729rem;
        color: #ffffff;
        line-height: 0.0833rem;
      }
    }
  }
}
.only-one {
  margin-top: 0.3125rem;
}
.map-container {
  min-height: 3.3854rem;
}
.menu-list {
  position: absolute;
  top: 0;
  right: 0;
  ul {
    display: flex;
    li {
      display: block;
      list-style: none;
      width: 0.3646rem;
      height: 0.1563rem;
      line-height: 0.1563rem;
      text-align: center;
      border: 0.0052rem solid #2099c58a;
      padding: 0rem 0.0521rem;
      letter-spacing: 0.0104rem;
      margin: 0.0625rem 0.0521rem;
      color: #1f9ecc6d;
      font-family: '微软雅黑';
      cursor: pointer;
      background: rgba(31, 158, 204, 0.2);
      border: 0.0052rem solid #2099c54a;
      user-select: none;
    }
    .activeChoise {
      color: rgb(255, 255, 255);
      background: rgba(31, 158, 204, 0.2);
      border: 0.0052rem solid #2099c5;
    }
    .cashChoise {
      color: rgb(255, 255, 255);
      background: rgba(31, 158, 204, 0.2);
      border: 0.0052rem solid #2099c5;
    }
  }
}
.scendTitle {
  width: 1.3958rem;
  height: 0.1979rem;
  background-image: url('../assets/fy/scendTitle.png');
  background-repeat: no-repeat;
  background-size: contain;
  text-align: start;
  line-height: 0.1823rem;
  padding-left: 0.1563rem;
  margin-left: 0.1563rem;
  margin-top: 0.2604rem;
  span {
    font-size: 0.0729rem;
    z-index: 1;
    color: white;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 0.0833rem;
    color: #00a8ff;
  }
}
.scendList {
  ul {
    display: flex;
    justify-content: space-between;
    padding: 0rem 0.1563rem;
    li {
      height: 0.2604rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0rem 0.1563rem;
      div {
        display: flex;
        align-items: center;
        img {
          width: 0.1042rem;
          height: 0.1042rem;
          margin-right: 0.0521rem;
        }
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 0.0833rem;
          color: #f3fffe;
          line-height: 0.1563rem;
          opacity: 0.8;
        }
      }
      .scendNum {
        font-family: DIN;
        font-weight: bold;
        font-size: 0.1458rem;
        color: #00a8ff;
        line-height: 0.1563rem;
      }
    }
  }
}
.pages-menu {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  padding: 10px;
  z-index: 99;
}

.pages-menu .up,
.pages-menu .down {
  padding: 8px 16px;
  letter-spacing: 1px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: linear-gradient(145deg, #1e90ff, #1c86ee);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pages-menu .up:hover,
.pages-menu .down:hover {
  background: linear-gradient(145deg, #63b8ff, #4682b4);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
</style>
